<template>
    <div style="background: #111214;color:#fff;min-height:100vh; width: 100%;">
        <home v-if="activeIndex == 0"></home>
        <myCenter v-if="activeIndex == 1"></myCenter>
        <div class="homeindex-nav">
          <div style="position: relative;" @click="activeCli(0)">
            <img v-if="activeIndex == 0" src="../assets/img/nav-icon-home-choice.svg" alt="">
            <img v-else src="../assets/img/nav-icon-home-default.svg" alt="">
            <span v-if="activeIndex == 0" class="homeindex-icon"></span>
          </div>
          <div style="position: relative;" @click="activeCli(1)">
            <img v-if="activeIndex == 1" src="../assets/img/nav-icon-personal-choice.svg" alt="">
            <img v-else src="../assets/img/nav-icon-personal-default.svg" alt="">
            <span v-if="activeIndex == 1" class="homeindex-icon"></span>
          </div>
        </div>
    </div>

  </template>

  <script>
  import home from './home.vue'
  import myCenter from './myCenter.vue'  
  import { Toast } from 'vant'
  export default {
    name: 'homeIndex',
    data () {
      return {
        activeIndex:0
      }
    },
    components:{
        home,
        myCenter
    },
    computed: {

    },
    mounted() {
      if(!localStorage.getItem('z_token')){
        this.$router.push('/login');
        return
      }
      if(localStorage.getItem('navActive')!=undefined){
        this.activeIndex = localStorage.getItem('navActive')
      }
    },
    methods: {
      activeCli(num){
        this.activeIndex = num;
        localStorage.setItem('navActive',num)
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .homeindex-nav{
      height: 70px;
      width: 100%;
      position: fixed;
      bottom: 0px;
      display: flex;
      justify-content: space-around;
      background-color: rgba(9, 9, 10, 0.8);
      img{
        margin-top: 14px;
      }
      .homeindex-icon{
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 24px;
        position: absolute;
        bottom: 11px;
        left: 12px;
      }
    }
  </style>
